import { observable, action, computed } from "mobx";
import { message } from 'antd';
import { displayTypes, fillinTypes } from '../constants/app';
import API from '../apis/app';
import ExcelAPI, { savePage, deletePage, setDefaultShow } from '../apis/excel';
import {WeaLocaleProvider} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

export default class AppDesignerStore {
    @observable tabKey = '';
    @observable selectedKey = '';
    @observable app;
    @observable loading = true;
    @observable tabs = [];
    @observable excelPages = [];
    @observable dropMenuVisible = false;

    @observable noRight = false;
    @observable readonly = false;

    @observable operatePage = {
        name: '',
        id: '',
        newName: ''
    };
    @observable editPageLoading = false;
    @observable editPageVisible = false;

    @observable appName = '';


    @action showPageEditDialog = (id, name) => {
        this.editPageVisible = true;
        this.operatePage.name = name;
        this.operatePage.newName = name;
        this.operatePage.id = id;
    }
    @action changeOperatePageName = (name) => {
        this.operatePage.newName = name;
    }
    @action hideEditPage = () => {
        this.editPageVisible = false;
        this.operatePage = {
            name: '',
            id: '',
            newName: ''
        };
    }
    @action deletePage = (id)=>{
        deletePage(id).then(()=>{
            this.selectedKey = undefined;
            this.getExcelPages(undefined, this.app.id);
        });
    }
    @action setDefaultShow = (id, defaultshow) => {
        const appid = this.app.id;
        setDefaultShow({ id, appid, defaultshow }).then(() => {
            this.getExcelPages({ id: this.selectedKey }, this.app.id);
        });
    }
    @action savePage = () => {
        if(!this.operatePage.newName) {
            message.error(getLabel('513478', '表格名称不能为空'));
        }else if (this.operatePage.name === this.operatePage.newName) {
            this.hideEditPage();
        } else {
            this.editPageLoading = true;
            savePage({ ...this.operatePage, name: this.operatePage.newName }).then(() => {
                this.getExcelPages({ id: this.selectedKey }, this.app.id);
                this.editPageLoading = false;
                this.hideEditPage();
                message.success(getLabel(502231, '保存成功'));
            });
        }
    }
    @action
    onTabKeyChange = (tabKey) => {
        this.tabKey = tabKey;
        if (this.tabKey === 'excel') {
            this.excelDesigner.showPageById(this.selectedKey);
        }
    }
    @action
    showDropMenu = (left, top) => {
        clearTimeout(this.hideDropMenuTimer);
        this.dropMenuLeft = left;
        this.dropMenuTop = top;
        this.dropMenuVisible = true;
    }
    @action
    hideDropMenu = () => {
        clearTimeout(this.hideDropMenuTimer);
        this.hideDropMenuTimer = setTimeout(() => {
            this.dropMenuVisible = false;
        }, 300);
    }
    @action
    initDesigner = (params) => {
        if (this.app && this.app.id === Number(params.appid)) return;

        this.loading = true;
        this.params = params;
        API.info(params.appid).then(this.setApp);
    }
    @action
    showPage = (id) => {
        this.selectedKey = id;
        this.tabKey = 'excel';
        this.dropMenuVisible = false;
        this.excelDesigner.showPageById(id);
    }
    @action
    setApp = (app) => {
        this.app = app;
        this.appName = app.name;
        document.title = this.appName;
        this.rightLevel = app.rightLevel;
        this.readonly = this.rightLevel === 1;
        this.noRight = this.rightLevel === 0;
        if (this.noRight) {
           // message.error("没有访问权限");
            return;
        }
        this.loading = false;
        if (this.app.displayType === displayTypes.FORM) {
            this.tabs = [
                { key: 'form', text: getLabel('502896','表单') },
                this.app.fillinType === fillinTypes.MULTI && { key: 'path', text: getLabel(18499,'路径') },
                { key: 'data', text: getLabel(563,'数据') },
                { key: 'analysis', text: getLabel('502851','分析') },
                this.rightLevel === 2 && { key: 'setting', text: getLabel('68','设置') }
            ].filter(d => !!d);
            this.tabKey = 'form';
        } else {
            this.tabs = [
                { key: 'excel', text: getLabel('502895','表格') },
                this.app.fillinType === fillinTypes.MULTI && { key: 'path', text: getLabel(18499,'路径') },
                { key: 'data', text: getLabel(563,'数据') },
                { key: 'analysis', text: getLabel('502851','分析') },
                this.rightLevel === 2 && { key: 'setting', text: getLabel('68','设置') }
            ].filter(d => !!d);
            this.tabKey = 'excel';
            this.getExcelPages(undefined, app.id);
        }
    }
    @action
    getExcelPages = (page, appid) => {
        if (page) {
            this.selectedKey = page.id;
        }
        ExcelAPI.getExcelPages(appid).then(this.setExcelPages);
    }
    @action
    setExcelPages = (pages = []) => {
        this.excelPages = pages;
        if (this.tabKey === 'excel' && !this.selectedKey) {
            // if (this.tabKey === 'excel') {
            this.selectedKey = (this.excelPages.filter(d => d.defaultshow == '1')[0] || {}).id;
            if (!this.selectedKey) {
                this.selectedKey = (pages.length > 0 ? pages[0].id : undefined);
            }
            this.showPage(this.selectedKey);
        }
    }
}